<!-- 
      search.html
      租赁搜索  id = search
      
      Created by tang on 2017-03-07.
      Copyright 2017 tang. All rights reserved.
 -->

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/swiper.css" />
		<link rel="stylesheet" type="text/css" href="../css/nouislider.css" />
		<link rel="stylesheet" href="../css/mui.picker.min.css" />
		<link rel="stylesheet" href="../css/search.css" />
	</head>
	<body class="gray" style="overflow: hidden;  ">
		<div class="mui-content loading " style="padding-bottom: 0px;">
			<div class="mui-scroll-wrapper" style="padding-bottom: 20px;">
			    <div class="mui-scroll" id="vueMain">
			    		<div class="search-h1" v-if="classList.classes.length!=0  ">器材类型</div>
						<div class="swiper-container" v-if="classList.classes.length!=0"> 
							<div class="swiper-wrapper">
								<template v-for="item in classList.classes">
									<div class="swiper-slide" :data-id="item.id" v-bind:class="classid==item.id?'active':''" >
										<img :src="item.logo" alt="" />
										<p>{{item.name}}</p>
									</div>
								</template>
							</div>
						</div>
						<div class="search-h1" v-if="cid==1||cid==5">租赁类型</div>
						<div class="mui-content-padded search-type" v-if="cid==1||cid==5">
							<div class="mui-pull-left " v-bind:class="{active:type==2}" data-type="2" >套餐</div>
							<div class="mui-pull-left " v-bind:class="{active:type==1}" data-type="1">单品</div>
						</div>
			
						<div class="mui-content-padded search-item city cityLink">
							<div class="mui-pull-right"> {{cityName}} </div>
							<div class="mui-pull-left">所在城市</div>
						</div>
			
						<!--<div class="search-h1">租赁时间</div>
						<div class="mui-content-padded search-item date">
							<div class="mui-pull-right">
								<span>结束</span>
								<p>{{endTimeName}}</p>
							</div>
							<div class="mui-pull-left">
								<span>开始</span>
								<p>{{startTimeName}}</p>
							</div>
						</div>-->
						
						<div v-if="classList.attr.legnth!=0">
							<template v-for="(item,index) in classList.attr">
									<div v-if="item.value.length<5">
										<div class="search-h1">{{item.name}}</div>
										<div class="typeList sex" v-if="item.value.length==3" >
											<template v-for="val in item.value">
												<span :data-id="item.id">{{val}}</span>
											</template>
										</div>
										<div class="typeList twos" v-else-if="item.value.length==2" :data-id="item.id">
											<template v-for="val in item.value">
												<span :data-id="item.id">{{val}}</span>
											</template>
										</div>
										<div class="typeList" v-else :data-id="item.id">
											<template v-for="val in item.value">
												<span :data-id="item.id">{{val}}</span>
											</template>
										</div>
									</div>
									<div v-else>
										<div class="mui-content-padded search-item city openW" :data-id="item.id" :data-name="item.name" >
											<div class="mui-pull-right">&nbsp;</div>
											<div class="mui-pull-left">{{item.name}}</div>
										</div>
									</div>							
							</template>
						</div>
						
			
						<div class="search-h1">价格区间</div>
						<div class="mui-content-padded nouder" style="margin-bottom: 4px;">
							<div class="mui-clearfix">
								<span class="mui-pull-left">10</span>
								<span class="mui-pull-right ">2.5K</span>
							</div>
							<div id="noUiSlider" class="noUiSlider"></div>
						</div>
						
			    </div>
			</div>
			<div class="search-bug"> 
				<button type="button" class="bexta-btn bexta-btn-drak mui-btn mui-btn-block bexta-btn-no_radius search-btn">开始搜索</button>
			</div>
		</div>
		<script src="../js/mui.js"></script>
		<script src="../js/vue.min.js"></script>
		<script src="../js/swiper.min.js"></script>
		<script src="../js/nouislider.min.js"></script>
		<script src="../js/mui.picker.min.js"></script>
		<script src="../js/bexta.js"></script>
		<script type="text/javascript">
			var apps;
			mui.init();
			mui.plusReady(function () {
			   var day1 = new Date().getTime();
			   var day2 = day1+86400000;
			   var view = bexta.getWebview();
			   bexta.ajax(api.search, function(res){
			   		initVue( bexta.getDate([day1,day2]), res,view.type);  
			   },{data:{class_id:view.type}})
			 	
			});
			//城市 选择返回
			window.addEventListener('toggleCity', function(evt){
				var city = evt.detail.city;
				apps.cityName = city[0].name;
				apps.cityid = city[0].value;
			});
			//日期回调
			window.addEventListener('toggleDate', function(evt){
				var selDate = evt.detail.date;
				var dx = bexta.getDate(selDate);
				if( dx.length < 2 ){
					dx.push( dx[0]);
				}
				apps.startTimeName = dx[0].date;
				apps.endTimeName = dx[1].date;
				apps.startTime = dx[0].fullDate;
				apps.endTime =dx[1].fullDate;
			});
			
			function initVue(dateTime, ify, comment){
				apps = new Vue({
					el:'#vueMain',
					data:{
						cid:comment,
						classList:ify,
						classid:0 ,  //类型id
						cityName:'不限', //城市 名称
						cityid:0,  //城市 id
						type:0,  //单品or套装 
						startTimeName:dateTime[0].date, // 显示用时间，只有月份和日期
						endTimeName : dateTime[1].date, // 显示用时间，只有月份和日期
						startTime:dateTime[0].fullDate, //起始时间
						endTime:dateTime[1].fullDate,  //结束时间
						startPrice:0,  //起始价格
						endPrice:2500,  //结束价格
						attr:[],
						attrName:{}
					},
					mounted:function(){
						setTimeout(function(){
							mui('.mui-scroll-wrapper')[0].style.height = window.innerHeight - 50 + 'px';
			   				mui('.mui-scroll-wrapper').scroll();
						});
						initMounted();
						initEvent();
						var self = this;
						if( self.cid == 4 || self.cid == 2 ){
							//后期，要选区域的
							var picker = new mui.PopPicker({layer:2, buttons:['取消','确定']});
							var cityArr = [], defaultIndex = 0;
							mui.each(this.classList.citylist, function(index){
								if( this.text == '深圳' ){
//									defaultIndex = index;
//									self.cityName = this.text+' '+ this.children[0].text;
//									self.cityid = this.value+'_'+ this.children[0].value;
								}
							});
							picker.setData(this.classList.citylist);
						}else{
							//只选城市 
							var picker = new mui.PopPicker({layer:1, buttons:['取消','确定']});
							var cityArr = [], defaultIndex = 0;
							mui.each(this.classList.citylist, function(index){
								if( this.text == '深圳' ){
//									defaultIndex = index;
								}
								cityArr.push({value:this.value, text:this.text});
							});
							picker.setData(cityArr);
						}
						
//						picker.pickers[0].setSelectedIndex(defaultIndex);
						mui('#vueMain').on('tap', '.cityLink', function(){
							picker.show(function(f){
								if( self.cid == 4 || self.cid == 2 ){
									apps.cityName = f[0].text +' '+ f[1].text;
									apps.cityid = f[0].value +'_' + f[1].value;
								}else{
									apps.cityName = f[0].text;
									apps.cityid = f[0].value;
								}
								
								
							});
						});
						mui('#vueMain').on('tap', '.openW', function(){
							var aid = this.getAttribute('data-id'),
								name = this.getAttribute('data-name');
							bexta.openWithTitle({
								id:'age',
								url:'age.html',
								extras:{
									val:getAttrVal(aid),
									aid:aid,
									def:apps.attrName[aid+'_a'] || []
								}
							},{
								title:{
									text:name
								}
							})
						});
					}
				});
			}
			function getAttrVal(aid){
				var idx = -1;
				mui.each(apps.classList.attr, function(index){
					if( this.id == aid ){
						idx = index;
					}
				});
				return idx != -1 ? apps.classList.attr[idx].value : null;
			}
			window.addEventListener('setVal', function(evt){
				var aid = evt.detail.aid,
					vals = evt.detail.val;
				if( vals.length == 0 ) return ;
				mui.each(apps.attr, function(index){ 
					if( this.indexOf(aid) != -1 ){
						apps.attr[index] = "";
					}
				});
				mui.each(vals, function(index){
					if( !bexta.inArray(apps.attr, aid+'*'+this) ){
						apps.attr.push( aid+'*'+this );
					}
				});
				var ap =[];
				mui.each(apps.attr, function(){
					if( this && this != "" ){
						ap.push(this);
					}
				});
				apps.attr = ap;
				apps.attrName[aid+'_a'] = vals;
				//设置显示
				var opens = document.querySelectorAll('.openW');
				mui.each(opens , function(){
					var id = this.getAttribute('data-id');
					if( id == aid ){
						this.querySelector('.mui-pull-right').innerHTML = vals.length == 1 ? vals[0] : vals[0]+'...';
					}
				});
			});
			function initMounted(){
				document.querySelector('.loading').classList.add('loadRun');
				//选择
				mui('#vueMain').on('tap', '.typeList span', function(){
					var aid = this.getAttribute('data-id'),
						txt = this.innerText.trim();
					if( this.classList.contains('active') ){
						//取消这个选择
						this.classList.remove('active');
						mui.each(apps.attr, function(index,item){
							if( this == aid+'*'+txt ){
								apps.attr.splice(index,1);
							}
						});
					}else{
						//选中
						this.classList.add('active');
						apps.attr.push( aid+'*'+txt );
					}
				});
				
				
				
				var swiper = new Swiper('.swiper-container', {
						pagination: '.swiper-pagination',
						slidesPerView: 3.5, //同时能显示多少个
						paginationClickable: false, 
						spaceBetween: "5%", //右间距
						slidesOffsetBefore: 15,
						slidesOffsetAfter: 15,
						freeMode: true, //使用惯性滑动
						onTap: function(swiper, evt) {
							if(evt.target.classList.contains('swiper-wrapper') ||
								evt.target.classList.contains('swiper-container')) {
								return false;
							} 
							var index = swiper.clickedIndex; 
							var id = mui('.swiper-slide')[index].getAttribute('data-id');
							if( apps.classid == id ){
								apps.classid = 0;
							}else{
								apps.classid = id;
							}
						}
					});
		
					var noUiSlider_obj = document.getElementById('noUiSlider');
					noUiSlider.create(noUiSlider_obj, {
						start: [10, 2500],
						connect: true,
						setp: 10,
						range: {
							min: [10],
							max: [5000]
						}
					});
					noUiSlider_obj.noUiSlider.on('update', function(val, index) {
						var span = D('.nouder .mui-clearfix span');
						for(var i = 0; i < val.length; i++) {
							if(val[i] > 999) {
								val[i] = (parseFloat(val[i]) / 1000).toFixed(2) + 'K';
							} else {
								val[i] = parseInt(val[i]);
							}
						}
						span.dom[index].innerText = val[index];
					});
					noUiSlider_obj.noUiSlider.on('change', function(val, index) {
						apps.startPrice = val[0];
						apps.endPrice = val[1];
					});
			}
			function initEvent(){
				//打开日历
//				document.querySelector('.date').addEventListener('tap', function(){
//					mui.openWindow({
//						url:"calendar.html",
//						id:"calendar",
//						extras:{type:'search'},
//						show:{autoShow:true,aniShow:'slide-in-bottom'}
//					});
//				});
				//类型切换
				mui('.search-type').on('tap', 'div', function(){
					var type = this.getAttribute('data-type');
					if( type == apps.type ){
						apps.type = 0;
					}else{
						apps.type = type;
					}
						
				});
				//进入搜索页
				document.querySelector('.search-btn').addEventListener('tap', function(){
					
					var send = {
						type:apps.cid,   //commend_id
						city_id:apps.cityid,  //城市id
						class_id:apps.classid,  //  类型id
						model_id:apps.type,   //套餐单品
						attr_id:apps.attr.join(','),    //属性
						start_price:apps.startPrice,   // 起始价
						end_price:apps.endPrice   //结束价
					};
//					plus.webview.close(bexta.getWebview().opener(), 'none');
					
					mui.fire(bexta.getWebview().opener(), 'toggleData', {
						sendData:send
					});
					mui.back();
					
					
					
//					bexta.openWithTitle({
//						id:'list',
//						url:'list.html',
//						extras:{
//							sendData :{
//								commend_id:apps.cid, 
//								class_id:apps.classid,
//								city_id:apps.cityid,
//								type:apps.type,
//								start_price:apps.startPrice,
//								end_price:apps.endPrice,
//								start_time:apps.startTime,
//								end_time:apps.endTime ,
//								attr_id:apps.attr.join(',')
//							}
//						}
//					},{},true);  
				}); 
			}
		</script>
	</body>

</html>